<div class="bs-docs-section">

  <div class="page-header">
    <h1 id="getting-started">Getting started <a class="small" href="//github.com/mgcrea/angular-strap/blob/master/README.md" target="_blank">readme.md</a>
    </h1>
    <code>mgcrea.ngStrap</code>
  </div>

  <div class="callout callout-info">
    <h4 id="project-history">About the project</h4>
    <p>AngularStrap is a set of native directives that enables seamless integration of Bootstrap#^3.0 into your AngularJS#^1.2 application.</p>
    <p>With no external dependency except the Bootstrap CSS styles, AngularStrap is light and fast. It has been built from the ground up to leverage ngAnimate!</p>
    <p>AngularStrap is tested against the latest patch release of the 1.2, 1.3 and 1.4 branches.</p>
  </div>

  <h2 id="project-quickstart">Quick Start</h2>
  <p>Install and manage AngularStrap with <a href="http://bower.io">Bower</a>. <small>You can also use <a href="https://www.nuget.org/packages/angular-strap">NuGet</a>.</small> A <a href="http://cdnjs.com/libraries/angular-strap">CDN</a> is also provided by cdnjs.com.</p>
  <div class="highlight">
    <pre>
      <code class="bash" highlight-block>
        $ bower install angular-strap --save
      </code>
    </pre>
  </div>

  <p>Load the required javascript libraries (Bootstrap scripts files are not needed).</p>
  <div class="highlight">
    <pre>
      <div class="code html">
        &lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/{{ ngVersion }}/angular.min.js"&gt;&lt;/script&gt;<br>
        &lt;script src="//cdnjs.cloudflare.com/ajax/libs/angular-strap/{{ version }}/angular-strap.min.js"&gt;&lt;/script&gt;<br>
        &lt;script src="//cdnjs.cloudflare.com/ajax/libs/angular-strap/{{ version }}/angular-strap.tpl.min.js"&gt;&lt;/script&gt;
      </div>
    </pre>
  </div>
  <p>Inject the
    <code>mgcrea.ngStrap</code>module into your application.</p>
  <div class="highlight">
    <pre>
      <code class="javascript" highlight-block>
        angular.module('myApp', ['mgcrea.ngStrap']);
      </code>
    </pre>
  </div>

  <div class="callout callout-info">
    <h4>Why are there two angular-strap files?</h4>
    <p>AngularStrap provides two different files:</p>
    <ul>
      <li>angular-strap.js: library javascript code</li>
      <li>angular-strap.tpl.js: default HTML inline templates used by the directives</li>
    </ul>
    <p>By keeping the HTML template definitions in a separate file, it makes it easier to customize the templates used by the directives by creating a custom copy of the file or by overriding some of the templates.</p>
  </div>

  <div class="callout callout-info">
    <h4>Custom builds</h4>
    <p>AngularStrap provides independently built modules that can be loaded separately</p>
    <div class="highlight">
      <pre>
        <code class="javascript" highlight-block>
          angular.module('myApp', [ 'mgcrea.ngStrap.modal', 'mgcrea.ngStrap.aside', 'mgcrea.ngStrap.tooltip' ]);
        </code>
      </pre>
    </div>
  </div>

  <h2 id="project-contribute">Contribute</h2>
  <p>Build and work on AngularStrap with <a href="http://gulpjs.com">Gulp</a>.</p>
  <div class="highlight">
    <pre>
      <code class="bash" highlight-block>
        // Serve and watch docs, ideal to hack!
        $ gulp serve
        // Continuous integration
        $ gulp karma:server
        // Build AngularStrap
        $ gulp build
      </code>
    </pre>
  </div>

  <h2 id="project-animations">Animations</h2>
  <p>AngularStrap leverages AngularJS
    <code>ngAnimate</code>module to provide animations to the directives. Therefore, it requires to load custom CSS code as
    <code>ngAnimate</code>comes with a very specific markup.</p>
  <div class="callout callout-info">
    <h4>AngularMotion</h4>
    <p>Theses docs rely on the
      <code>angular-motion.css</code>stylesheet from the <a href="//github.com/mgcrea/angular-motion" target="_blank">AngularMotion</a> project.</p>
    <div class="highlight">
      <pre>
        <code class="bash" highlight-block>
          $ bower install angular-motion --save
        </code>
      </pre>
    </div>
  </div>


</div>
